<template>
  <view class="home-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="location-section" @click="selectLocation">
        <u-icon name="map" size="28" color="#007aff"></u-icon>
        <text class="location-text">北京市朝阳区</text>
        <u-icon name="arrow-down" size="20" color="#999"></u-icon>
      </view>
      
      <view class="search-section" @click="goToSearch">
        <u-icon name="search" size="28" color="#999"></u-icon>
        <text class="search-placeholder">搜索洗车点/套餐</text>
      </view>
      
      <view class="user-section" @click="goToProfile" v-if="isLogin">
        <u-avatar :src="userInfo?.avatar || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'" size="40"></u-avatar>
      </view>
      <view class="login-btn" @click="goToLogin" v-else>
        <text>登录</text>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <view class="swiper-section">
      <u-swiper
        :list="swiperList"
        indicator
        indicatorMode="dot"
        circular
        :autoplay="true"
        height="320rpx"
        bgColor="#f5f5f5"
        @click="handleSwiperClick"
      >
        <template #default="{ item, index }">
          <view class="swiper-item">
            <image :src="item.image" mode="aspectFill" class="swiper-image"></image>
          </view>
        </template>
      </u-swiper>
    </view>
    
    <!-- 快捷功能区 -->
    <view class="quick-actions">
      <view class="action-grid">
        <view class="action-item" @click="goToDeviceList">
          <view class="action-icon bg-blue">
            <u-icon name="car" size="40" color="#fff"></u-icon>
          </view>
          <text class="action-text">立即洗车</text>
        </view>
        
        <view class="action-item" @click="goToPackages">
          <view class="action-icon bg-orange">
            <u-icon name="gift" size="40" color="#fff"></u-icon>
          </view>
          <text class="action-text">套餐优惠</text>
        </view>
        
        <view class="action-item" @click="goToMember">
          <view class="action-icon bg-purple">
            <u-icon name="star" size="40" color="#fff"></u-icon>
          </view>
          <text class="action-text">会员中心</text>
        </view>
        
        <view class="action-item" @click="goToInvite">
          <view class="action-icon bg-green">
            <u-icon name="share" size="40" color="#fff"></u-icon>
          </view>
          <text class="action-text">邀请好友</text>
        </view>
      </view>
    </view>
    
    <!-- 优惠活动横幅 -->
    <view class="promo-banner" @click="goToPromo">
      <image src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" mode="aspectFill" class="banner-image"></image>
      <view class="promo-overlay">
        <text class="promo-title">限时优惠</text>
        <text class="promo-subtitle">超值套餐 等你来抢</text>
      </view>
    </view>
    
    <!-- 附近洗车点 -->
    <view class="section-title">
      <text class="title-text">附近洗车点</text>
      <text class="more-text" @click="goToDeviceList">查看全部 ></text>
    </view>
    
    <view class="nearby-devices">
      <view 
        class="device-item" 
        v-for="device in nearbyDevices" 
        :key="device.id"
        @click="selectDevice(device)"
      >
        <view class="device-main">
          <view class="device-info">
            <text class="device-name">{{ device.name }}</text>
            <view class="device-meta">
              <view class="device-location">
                <u-icon name="map" size="20" color="#999"></u-icon>
                <text class="location-text">{{ device.location }}</text>
              </view>
              <view class="device-distance">
                <u-icon name="clock" size="20" color="#999"></u-icon>
                <text class="distance-text">{{ device.distance }}</text>
              </view>
            </view>
          </view>
          
          <view class="device-status">
            <u-tag 
              :text="getStatusText(device.status)" 
              :type="getStatusType(device.status)"
              size="mini"
            />
          </view>
        </view>
        
        <view class="device-features">
          <u-tag text="24小时营业" type="success" size="mini" plain />
          <u-tag text="支持预约" type="primary" size="mini" plain />
          <u-tag :text="device.type === 'premium' ? '高端设备' : '标准设备'" type="warning" size="mini" plain />
        </view>
      </view>
    </view>
    
    <!-- 热门套餐推荐 -->
    <view class="section-title">
      <text class="title-text">热门套餐</text>
      <text class="more-text" @click="goToPackages">查看更多 ></text>
    </view>
    
    <view class="package-list">
      <view 
        class="package-item" 
        v-for="pkg in packageList" 
        :key="pkg.id"
        @click="selectPackage(pkg)"
      >
        <view class="package-header">
          <text class="package-name">{{ pkg.name }}</text>
          <u-tag :text="pkg.tag" type="warning" size="mini" />
        </view>
        
        <view class="package-content">
          <text class="package-desc">{{ pkg.description }}</text>
          <view class="package-price">
            <text class="price">¥{{ pkg.price }}</text>
            <text class="original-price">¥{{ pkg.originalPrice }}</text>
          </view>
        </view>
        
        <view class="package-footer">
          <text class="sales-text">已售{{ pkg.sales }}份</text>
          <u-button type="primary" size="mini" @click.stop="buyPackage(pkg)">立即购买</u-button>
        </view>
      </view>
    </view>
    
    <!-- 会员特权 -->
    <view class="section-title">
      <text class="title-text">会员特权</text>
      <text class="more-text" @click="goToMember">立即开通 ></text>
    </view>
    
    <view class="member-benefits">
      <view class="benefit-item">
        <u-icon name="coupon" size="40" color="#ff6600"></u-icon>
        <text class="benefit-text">专享优惠券</text>
      </view>
      
      <view class="benefit-item">
        <u-icon name="clock" size="40" color="#007aff"></u-icon>
        <text class="benefit-text">优先预约</text>
      </view>
      
      <view class="benefit-item">
        <u-icon name="gift" size="40" color="#ff9900"></u-icon>
        <text class="benefit-text">生日礼包</text>
      </view>
      
      <view class="benefit-item">
        <u-icon name="integral" size="40" color="#1677ff"></u-icon>
        <text class="benefit-text">双倍积分</text>
      </view>
    </view>
    
    <!-- 数据统计 -->
    <view class="stats">
      <view class="stat-item">
        <text class="stat-number">{{ serviceCount }}</text>
        <text class="stat-label">累计服务</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-number">{{ userCount }}</text>
        <text class="stat-label">服务用户</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-number">{{ satisfactionRate }}%</text>
        <text class="stat-label">满意度</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'
import { useDeviceStore } from '@/store/device'

// 用户store
const userStore = useUserStore()

// 设备store
const deviceStore = useDeviceStore()

// 是否登录
const isLogin = computed(() => userStore.getIsLogin)

// 用户信息
const userInfo = computed(() => userStore.getUserInfo)

// 轮播图数据 - 使用网上赛车图片
const swiperList = ref([
  { image: 'https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' },
  { image: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' },
  { image: 'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' }
])

// 附近洗车点数据
const nearbyDevices = ref([
  {
    id: 'D001',
    name: '朝阳门店1号洗车机',
    location: '朝阳区建国路88号',
    distance: '150m',
    status: 'available',
    type: 'standard'
  },
  {
    id: 'D002',
    name: 'CBD店2号洗车机',
    location: '朝阳区CBD核心区',
    distance: '300m',
    status: 'occupied',
    type: 'premium'
  },
  {
    id: 'D003',
    name: '国贸店3号洗车机',
    location: '朝阳区国贸大厦',
    distance: '500m',
    status: 'available',
    type: 'premium'
  }
])

// 套餐列表数据
const packageList = ref([
  {
    id: 'P001',
    name: '标准洗车套餐',
    tag: '热销',
    description: '清水冲洗、泡沫清洁、清水冲漂、风干',
    price: 15,
    originalPrice: 20,
    sales: 1234
  },
  {
    id: 'P002',
    name: '深度清洁套餐',
    tag: '推荐',
    description: '标准洗车+打蜡服务',
    price: 25,
    originalPrice: 35,
    sales: 856
  },
  {
    id: 'P003',
    name: '至尊洗车套餐',
    tag: '豪华',
    description: '深度清洁+内饰吸尘+玻璃清洁',
    price: 35,
    originalPrice: 50,
    sales: 432
  }
])

// 统计数据
const serviceCount = ref('10万+')
const userCount = ref('5万+')
const satisfactionRate = ref(99)

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}

// 跳转到个人中心
const goToProfile = () => {
  uni.switchTab({ url: '/pages/user/profile' })
}

// 选择位置
const selectLocation = () => {
  // 模拟位置选择功能
  uni.showActionSheet({
    itemList: ['北京市朝阳区', '北京市海淀区', '北京市西城区', '北京市东城区'],
    success: function (res) {
      uni.showToast({ 
        title: `已选择: ${['北京市朝阳区', '北京市海淀区', '北京市西城区', '北京市东城区'][res.tapIndex]}`, 
        icon: 'none' 
      })
    }
  })
}

// 跳转到搜索页
const goToSearch = () => {
  uni.navigateTo({ url: '/pages/search/search' })
}

// 跳转到设备列表
const goToDeviceList = () => {
  uni.switchTab({ url: '/pages/device/list' })
}

// 跳转到套餐页面
const goToPackages = () => {
  uni.navigateTo({ url: '/pages/package/list' })
}

// 跳转到会员中心
const goToMember = () => {
  uni.navigateTo({ url: '/pages/member/index' })
}

// 跳转到邀请页面
const goToInvite = () => {
  uni.navigateTo({ url: '/pages/invite/index' })
}

// 跳转到优惠活动页面
const goToPromo = () => {
  uni.navigateTo({ url: '/pages/promo/index' })
}

// 处理轮播图点击
const handleSwiperClick = (index: number) => {
  uni.showToast({ title: `点击了第${index + 1}张图片`, icon: 'none' })
}

// 选择设备
const selectDevice = (device: any) => {
  uni.navigateTo({ 
    url: `/pages/device/control?id=${device.id}` 
  })
}

// 选择套餐
const selectPackage = (pkg: any) => {
  uni.showToast({ title: `选择了${pkg.name}`, icon: 'none' })
}

// 购买套餐
const buyPackage = (pkg: any) => {
  uni.showToast({ title: `购买${pkg.name}`, icon: 'none' })
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    available: '空闲',
    occupied: '使用中',
    maintenance: '维护中',
    offline: '离线'
  }
  
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    available: 'success',
    occupied: 'warning',
    maintenance: 'error',
    offline: 'info'
  }
  
  return typeMap[status] || 'info'
}

onMounted(() => {
  // 初始化设备数据
  deviceStore.initDevices()
  
  // 初始化用户信息
  userStore.initUserInfo()
})

onShow(() => {
  // 页面显示时刷新用户信息
  userStore.initUserInfo()
})
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .location-section {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    
    .location-text {
      font-size: 28rpx;
      color: #333;
      margin: 0 10rpx;
    }
  }
  
  .search-section {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 30rpx;
    padding: 15rpx 20rpx;
    
    .search-placeholder {
      font-size: 26rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }
  
  .user-section {
    margin-left: 20rpx;
  }
  
  .login-btn {
    padding: 10rpx 20rpx;
    background-color: #007aff;
    border-radius: 30rpx;
    margin-left: 20rpx;
    
    text {
      color: #fff;
      font-size: 28rpx;
    }
  }
}

.swiper-section {
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  
  .swiper-item {
    width: 100%;
    height: 100%;
    
    .swiper-image {
      width: 100%;
      height: 100%;
    }
  }
}

.quick-actions {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .action-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;
        
        &.bg-blue {
          background-color: #007aff;
        }
        
        &.bg-orange {
          background-color: #ff9900;
        }
        
        &.bg-purple {
          background-color: #668cff;
        }
        
        &.bg-green {
          background-color: #07c160;
        }
      }
      
      .action-text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

.promo-banner {
  position: relative;
  height: 200rpx;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
  
  .promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40rpx;
    
    .promo-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10rpx;
    }
    
    .promo-subtitle {
      font-size: 24rpx;
      color: rgba(255,255,255,0.9);
    }
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .more-text {
    font-size: 28rpx;
    color: #999;
  }
}

.nearby-devices {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .device-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .device-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .device-info {
        .device-name {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .device-meta {
          display: flex;
          
          .device-location, .device-distance {
            display: flex;
            align-items: center;
            margin-right: 20rpx;
            
            .location-text, .distance-text {
              font-size: 24rpx;
              color: #999;
              margin-left: 10rpx;
            }
          }
        }
      }
    }
    
    .device-features {
      display: flex;
      gap: 10rpx;
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.package-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
  
  .package-item {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
    
    .package-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .package-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .package-content {
      margin-bottom: 20rpx;
      
      .package-desc {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .package-price {
        display: flex;
        align-items: center;
        
        .price {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff6600;
          margin-right: 10rpx;
        }
        
        .original-price {
          font-size: 26rpx;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
    
    .package-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .sales-text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.member-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .benefit-text {
      font-size: 24rpx;
      color: #333;
      margin-top: 15rpx;
      text-align: center;
    }
  }
}

.stats {
  display: flex;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 0;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .stat-item {
    flex: 1;
    text-align: center;
    
    .stat-number {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #007aff;
      margin-bottom: 10rpx;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>